<template>
    <view class="doctor-detail-container">
        <!-- 医生基本信息 -->
        <view class="basic-info">
            <image class="avatar" :src="doctor.avatar" mode="aspectFill"></image>
            <view class="info">
                <view class="name-row">
                    <text class="name">{{doctor.name}}</text>
                    <text class="title">{{doctor.title}}</text>
                    <view class="status" :class="doctor.status">
                        {{doctor.status === 'online' ? '在线' : '离线'}}
                    </view>
                </view>
                <view class="department">{{doctor.department}}</view>
                <view class="hospital">{{doctor.hospital}}</view>
            </view>
        </view>
        
        <!-- 医生标签 -->
        <view class="tags-section">
            <view class="section-title">擅长领域</view>
            <view class="tags">
                <text class="tag" v-for="(tag, index) in doctor.tags" :key="index">
                    {{tag}}
                </text>
            </view>
        </view>
        
        <!-- 医生简介 -->
        <view class="intro-section">
            <view class="section-title">医生简介</view>
            <view class="content">{{doctor.introduction}}</view>
        </view>
        
        <!-- 专业背景 -->
        <view class="background-section">
            <view class="section-title">专业背景</view>
            <view class="content">
                <view class="item" v-for="(item, index) in doctor.background" :key="index">
                    <text class="label">{{item.label}}：</text>
                    <text class="value">{{item.value}}</text>
                </view>
            </view>
        </view>
        
        <!-- 患者评价 -->
        <view class="review-section">
            <view class="section-header">
                <view class="section-title">患者评价</view>
                <view class="rating">
                    <u-rate :value="doctor.rating" disabled></u-rate>
                    <text class="score">{{doctor.rating}}分</text>
                </view>
            </view>
            <view class="reviews">
                <view class="review-item" v-for="(review, index) in doctor.reviews" :key="index">
                    <view class="user-info">
                        <image class="avatar" :src="review.user.avatar" mode="aspectFill"></image>
                        <view class="info">
                            <text class="name">{{review.user.name}}</text>
                            <text class="time">{{review.time}}</text>
                        </view>
                    </view>
                    <view class="content">{{review.content}}</view>
                </view>
            </view>
        </view>
        
        <!-- 底部按钮 -->
        <view class="bottom-buttons">
            <u-button type="primary" @click="startConsult">立即咨询</u-button>
        </view>
    </view>
</template>

<script>
import request from '@/util/request'

export default {
    data() {
        return {
            doctor: {
                id: 1,
                name: '张医生',
                title: '主任医师',
                department: '神经内科',
                hospital: '北京协和医院',
                avatar: '/static/images/doctor1.jpg',
                status: 'online',
                tags: ['擅长脑卒中', '10年经验', '神经康复'],
                introduction: '从事神经内科临床工作10余年，擅长脑卒中、帕金森病、癫痫等神经系统疾病的诊断和治疗。在神经康复领域有丰富的临床经验，帮助众多患者恢复健康。',
                background: [
                    {
                        label: '教育背景',
                        value: '北京大学医学部 神经病学博士'
                    },
                    {
                        label: '工作经历',
                        value: '北京协和医院神经内科 主任医师'
                    },
                    {
                        label: '学术成就',
                        value: '发表SCI论文20余篇，主持国家自然科学基金项目2项'
                    }
                ],
                rating: 4.8,
                reviews: [
                    {
                        user: {
                            name: '王先生',
                            avatar: '/static/images/user1.jpg'
                        },
                        time: '2023-12-15',
                        content: '张医生非常专业，耐心解答我的问题，给出了很好的治疗建议。'
                    },
                    {
                        user: {
                            name: '李女士',
                            avatar: '/static/images/user2.jpg'
                        },
                        time: '2023-12-10',
                        content: '医生很细心，对病情分析很到位，治疗效果很好。'
                    }
                ]
            }
        }
    },
    methods: {
        async loadDoctorDetail() {
            try {
                const id = this.$route.query.id
                const res = await request.get(`/api/doctor/detail/${id}`)
                if (res.code === 200) {
                    this.doctor = res.data
                }
            } catch (error) {
                console.log(error)
            }
        },
        
        startConsult() {
            uni.navigateTo({
                url: `/pages/consultation/chat?id=${this.doctor.id}`
            })
        }
    },
    onLoad() {
        this.loadDoctorDetail()
    }
}
</script>

<style lang="less" scoped>
.doctor-detail-container {
    min-height: 100vh;
    background-color: #F8F8F8;
    padding-bottom: 120rpx;
    
    .basic-info {
        background-color: #fff;
        padding: 40rpx 30rpx;
        display: flex;
        align-items: center;
        
        .avatar {
            width: 160rpx;
            height: 160rpx;
            border-radius: 80rpx;
            margin-right: 30rpx;
        }
        
        .info {
            flex: 1;
            
            .name-row {
                display: flex;
                align-items: center;
                margin-bottom: 10rpx;
                
                .name {
                    font-size: 36rpx;
                    font-weight: bold;
                    color: #333;
                    margin-right: 20rpx;
                }
                
                .title {
                    font-size: 28rpx;
                    color: #666;
                    margin-right: 20rpx;
                }
                
                .status {
                    font-size: 24rpx;
                    padding: 4rpx 16rpx;
                    border-radius: 20rpx;
                    
                    &.online {
                        background-color: #E1F3D8;
                        color: #67C23A;
                    }
                    
                    &.offline {
                        background-color: #FDF6EC;
                        color: #E6A23C;
                    }
                }
            }
            
            .department {
                font-size: 32rpx;
                color: #333;
                margin-bottom: 6rpx;
            }
            
            .hospital {
                font-size: 28rpx;
                color: #999;
            }
        }
    }
    
    .tags-section,
    .intro-section,
    .background-section,
    .review-section {
        background-color: #fff;
        margin-top: 20rpx;
        padding: 30rpx;
        
        .section-title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 20rpx;
        }
    }
    
    .tags-section {
        .tags {
            display: flex;
            flex-wrap: wrap;
            
            .tag {
                font-size: 24rpx;
                color: #666;
                background-color: #F8F8F8;
                padding: 4rpx 16rpx;
                border-radius: 20rpx;
                margin-right: 10rpx;
                margin-bottom: 10rpx;
            }
        }
    }
    
    .intro-section {
        .content {
            font-size: 28rpx;
            color: #666;
            line-height: 1.6;
        }
    }
    
    .background-section {
        .content {
            .item {
                display: flex;
                margin-bottom: 20rpx;
                
                &:last-child {
                    margin-bottom: 0;
                }
                
                .label {
                    font-size: 28rpx;
                    color: #333;
                    font-weight: bold;
                    width: 160rpx;
                }
                
                .value {
                    flex: 1;
                    font-size: 28rpx;
                    color: #666;
                    line-height: 1.6;
                }
            }
        }
    }
    
    .review-section {
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20rpx;
            
            .rating {
                display: flex;
                align-items: center;
                
                .score {
                    font-size: 28rpx;
                    color: #FF9900;
                    margin-left: 10rpx;
                }
            }
        }
        
        .reviews {
            .review-item {
                padding: 20rpx 0;
                border-bottom: 2rpx solid #F8F8F8;
                
                &:last-child {
                    border-bottom: none;
                }
                
                .user-info {
                    display: flex;
                    align-items: center;
                    margin-bottom: 10rpx;
                    
                    .avatar {
                        width: 60rpx;
                        height: 60rpx;
                        border-radius: 30rpx;
                        margin-right: 20rpx;
                    }
                    
                    .info {
                        .name {
                            font-size: 28rpx;
                            color: #333;
                            margin-bottom: 4rpx;
                        }
                        
                        .time {
                            font-size: 24rpx;
                            color: #999;
                        }
                    }
                }
                
                .content {
                    font-size: 28rpx;
                    color: #666;
                    line-height: 1.6;
                }
            }
        }
    }
    
    .bottom-buttons {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #fff;
        padding: 20rpx 30rpx;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    }
}
</style> 